Atidėtas įkėlimas (Lazy Loading): Svetainės našumo optimizavimas naudojant paveikslėlius ir komponentus

Šiuolaikiniame skaitmeniniame pasaulyje svetainės našumas yra svarbiausias. Vartotojai tikisi greitos, jautrios patirties, o paieškos sistemos teikia pirmenybę svetainėms, kurios tai užtikrina. Viena iš esminių našumui didinti skirtų technikų yra atidėtas įkėlimas (lazy loading). Šiame straipsnyje pateikiamas išsamus vadovas apie atidėtą paveikslėlių ir komponentų įkėlimą, kuris padės jums optimizuoti svetainę pasaulinei auditorijai.

Kas yra atidėtas įkėlimas?

Atidėtas įkėlimas yra technika, kuri atideda išteklių (paveikslėlių, iframe, komponentų ir kt.) įkėlimą, kol jų iš tikrųjų prireikia – paprastai, kai jie ruošiasi patekti į matomą sritį (viewport). Tai reiškia, kad vietoj to, kad visi resursai būtų įkeliami iš anksto, naršyklė įkelia tik tuos išteklius, kurie yra matomi vartotojui pradinio puslapio įkėlimo metu. Kai vartotojas slenka puslapį žemyn, daugiau išteklių įkeliama, kai jie tampa matomi.

Įsivaizduokite tai taip: ruošiatės kelionei. Užuot iš karto su savimi tempę visą savo garderobą, pakuojate tik tuos drabužius, kurių, žinote, prireiks nedelsiant. Kelionės eigoje išpakuojate papildomus daiktus, kai jų prireikia. Iš esmės taip veikia atidėtas įkėlimas svetainėse.

Kodėl verta naudoti atidėtą įkėlimą?

Atidėtas įkėlimas siūlo keletą reikšmingų privalumų:

• Geresnis pradinis puslapio įkėlimo laikas: Atidėjus už ekrano ribų esančių išteklių įkėlimą, naršyklė gali sutelkti dėmesį į turinio, kuris iš karto matomas vartotojui, įkėlimą. Tai lemia greitesnį pradinį puslapio įkėlimo laiką, pagerina pirmąjį vartotojo įspūdį ir sumažina atmetimo rodiklius.
• Sumažintas duomenų srauto suvartojimas: Vartotojai atsisiunčia tik tuos išteklius, kuriuos iš tikrųjų mato, taip sumažindami duomenų srauto suvartojimą, ypač vartotojams, naudojantiems mobiliuosius įrenginius ar turintiems ribotus duomenų planus. Tai ypač svarbu vartotojams regionuose, kuriuose interneto greitis yra lėtesnis arba duomenys brangūs.
• Mažesnė serverio apkrova: Pateikiant mažiau pradinių užklausų, serveris patiria mažesnę apkrovą, o tai gali pagerinti bendrą svetainės našumą ir mastelį.
• Geresnė vartotojo patirtis: Greitesnė svetainė suteikia geresnę vartotojo patirtį, o tai lemia didesnį įsitraukimą, konversijas ir klientų pasitenkinimą.
• Pagerintas SEO: Paieškos sistemos, tokios kaip „Google“, puslapio įkėlimo greitį laiko reitingavimo veiksniu. Atidėtas įkėlimas gali padėti pagerinti jūsų svetainės SEO našumą.

Atidėtas paveikslėlių įkėlimas

Paveikslėliai dažnai yra didžiausi svetainės resursai, todėl jie yra pagrindiniai kandidatai atidėtam įkėlimui. Štai kaip įdiegti atidėtą paveikslėlių įkėlimą:

Natūralus atidėtas įkėlimas

Šiuolaikinės naršyklės („Chrome“, „Firefox“, „Safari“ ir „Edge“) dabar palaiko natūralų atidėtą įkėlimą naudojant loading atributą. Tai yra paprasčiausias ir efektyviausias būdas atidėti paveikslėlių įkėlimą.

Norėdami įjungti natūralų atidėtą įkėlimą, tiesiog pridėkite loading="lazy" atributą prie savo <img> žymos:

            <img src="image.jpg" alt="My Image" loading="lazy">
            

              
                Copy
              
            
          

loading atributas gali turėti tris reikšmes:

• lazy: Atidėti paveikslėlio įkėlimą, kol jis ruošiasi patekti į matomą sritį.
• eager: Įkelti paveikslėlį nedelsiant, neatsižvelgiant į jo padėtį puslapyje. (Tai yra numatytasis elgesys, jei atributo nėra.)
• auto: Leisti naršyklei nuspręsti, ar atidėti paveikslėlio įkėlimą.

Pavyzdys:

            <img src="london_bridge.jpg" alt="London Bridge" loading="lazy" width="600" height="400">
<img src="tokyo_skyline.jpg" alt="Tokyo Skyline" loading="lazy" width="600" height="400">
<img src="rio_de_janeiro.jpg" alt="Rio de Janeiro" loading="lazy" width="600" height="400">
            

              
                Copy
              
            
          

Šiame pavyzdyje Londono tilto, Tokijo panoramos ir Rio de Žaneiro paveikslėliai bus įkelti tik tada, kai vartotojas nuslinks iki jų. Tai yra labai naudinga, ypač jei vartotojas nenuslenka iki pat puslapio apačios.

Atidėtas įkėlimas su JavaScript

Senesnėms naršyklėms, kurios nepalaiko natūralaus atidėto įkėlimo, galite naudoti JavaScript bibliotekas arba parašyti savo scenarijų. Štai pagrindinis pavyzdys, naudojant „Intersection Observer“ API:

            const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});
            

              
                Copy
              
            
          

Paaiškinimas:

1. Pasirenkame visus <img> elementus, turinčius data-src atributą.
2. Sukuriame naują IntersectionObserver egzempliorių. Atgalinio iškvietimo funkcija (callback) vykdoma, kai stebimas elementas patenka į matomą sritį arba ją palieka.
3. Atgalinio iškvietimo funkcijoje mes iteruojame per entries (elementus, kurie susikirto su matoma sritimi).
4. Jei elementas susikerta (entry.isIntersecting yra tiesa), mes nustatome paveikslėlio src atributą pagal data-src atributo vertę.
5. Tada mes pašaliname data-src atributą ir nustojame stebėti paveikslėlį, nes to daugiau nebereikia.
6. Galiausiai, mes stebime kiekvieną paveikslėlį naudodami observer.observe(img).

HTML struktūra:

            <img data-src="image.jpg" alt="My Image">
            

              
                Copy
              
            
          

Atkreipkite dėmesį, kad tikrasis paveikslėlio URL yra įdėtas į data-src atributą, o ne į src atributą. Tai neleidžia naršyklei nedelsiant įkelti paveikslėlio.

Atidėto įkėlimo bibliotekų naudojimas

Kelios JavaScript bibliotekos gali supaprastinti atidėto paveikslėlių įkėlimo procesą. Keletas populiarių parinkčių:

• Lozad.js: Lengva, priklausomybių neturinti atidėto įkėlimo biblioteka.
• yall.js: Yet Another Lazy Loader. Šiuolaikinė atidėto įkėlimo biblioteka, naudojanti „Intersection Observer“.
• React Lazy Load: „React“ komponentas, skirtas atidėtam paveikslėlių ir kitų komponentų įkėlimui.

Šios bibliotekos paprastai suteikia paprastą API atidėto įkėlimo inicijavimui ir siūlo papildomų funkcijų, tokių kaip laikinieji paveikslėliai (placeholders) ir perėjimo efektai.

Atidėtas komponentų įkėlimas

Atidėtas įkėlimas skirtas ne tik paveikslėliams; jis taip pat gali būti taikomas komponentams, ypač šiuolaikinėse JavaScript karkasuose, tokiuose kaip „React“, „Angular“ ir „Vue“. Tai ypač naudinga didelėms vieno puslapio programoms (SPA) su daugybe komponentų.

Atidėtas įkėlimas „React“

„React“ suteikia integruotą React.lazy() funkciją atidėtam komponentų įkėlimui. Ši funkcija leidžia dinamiškai importuoti komponentus, kurie vėliau įkeliami tik tada, kai jie yra atvaizduojami.

            import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Kraunasi...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

Paaiškinimas:

1. Naudojame React.lazy(), kad dinamiškai importuotume MyComponent. import() funkcija grąžina pažadą (promise), kuris išsisprendžia į komponento modulį.
2. Apgaubiame MyComponent <Suspense> komponentu. Suspense komponentas leidžia rodyti atsarginę vartotojo sąsają (šiuo atveju „Kraunasi...“), kol komponentas yra įkeliamas.

Atidėtas įkėlimas „Angular“

„Angular“ palaiko atidėtą modulių įkėlimą naudojant loadChildren savybę maršrutizavimo konfigūracijoje.

            const routes: Routes = [
  {
    path: 'my-module',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
  }
];
            

              
                Copy
              
            
          

Paaiškinimas:

1. Nustatome maršrutą my-module keliui.
2. Naudojame loadChildren savybę, norėdami nurodyti, kad MyModuleModule turėtų būti įkeltas atidėtai. import() funkcija dinamiškai importuoja modulį.
3. then() metodas naudojamas norint pasiekti modulį ir grąžinti MyModuleModule klasę.

Atidėtas įkėlimas „Vue.js“

„Vue.js“ palaiko atidėtą komponentų įkėlimą naudojant dinaminius importus ir component žymą.

            <template>
  <component :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted() {
    import('./MyComponent.vue')
      .then(module => {
        this.dynamicComponent = module.default
      })
  }
}
</script>
            

              
                Copy
              
            
          

Paaiškinimas:

1. Naudojame <component> žymą su :is atributu, kad dinamiškai atvaizduotume komponentą.
2. mounted gyvavimo ciklo metode naudojame import() funkciją, kad dinamiškai importuotume MyComponent.vue.
3. Tada mes nustatome dynamicComponent duomenų savybę į numatytąjį modulio eksportą.

Geriausios atidėto įkėlimo praktikos

Norėdami užtikrinti, kad atidėtas įkėlimas būtų įdiegtas efektyviai, apsvarstykite šias geriausias praktikas:

• Kai įmanoma, naudokite natūralų atidėtą įkėlimą: Jei orientuojatės į šiuolaikines naršykles, naudokite natūralų loading atributą paveikslėliams ir iframe.
• Pasirinkite tinkamą biblioteką: Jei reikia palaikyti senesnes naršykles arba reikalingos papildomos funkcijos, pasirinkite gerai prižiūrimą ir lengvą atidėto įkėlimo biblioteką.
• Naudokite laikinuosius paveikslėlius (placeholders): Pateikite laikinuosius paveikslėlius ar vartotojo sąsajos elementus, kad turinys nepasislinktų, kai įkeliami ištekliai. Tai pagerina vartotojo patirtį ir sumažina maketo nestabilumą. Naudokite labai mažus (mažo KB dydžio) laikinuosius paveikslėlius arba tiesiog vientisos spalvos blokus, atitinkančius vidutinę paveikslėlio, kuris galiausiai bus įkeltas, spalvą.
• Optimizuokite paveikslėlius: Prieš įdiegdami atidėtą įkėlimą, optimizuokite savo paveikslėlius juos suspausdami ir naudodami tinkamus failų formatus (pvz., WebP, JPEG, PNG).
• Kruopščiai testuokite: Išbandykite savo atidėto įkėlimo įgyvendinimą įvairiose naršyklėse, įrenginiuose ir tinklo sąlygomis, kad įsitikintumėte, jog jis veikia teisingai. Atkreipkite dėmesį į vartotojus, turinčius žemesnės klasės įrenginius (dažnai senesnius telefonus), kad užtikrintumėte, jog paveikslėliai neįkeliami per ilgai.
• Atsižvelkite į matomą sritį (the fold): Venkite atidėto įkėlimo elementams, esantiems virš matomos srities (matomiems pradinio puslapio įkėlimo metu). Šie elementai turėtų būti įkeliami nedelsiant (eagerly), kad būtų užtikrintas greitas pradinis atvaizdavimas.
• Teikite pirmenybę kritiniams ištekliams: Nustatykite kritinius išteklius, kurie yra būtini pradinei vartotojo patirčiai, ir įkelkite juos nedelsiant. Tai gali būti svetainės logotipas, navigacijos elementai ir pagrindinis puslapio turinys.
• Stebėkite našumą: Naudokite našumo stebėjimo įrankius, kad galėtumėte sekti atidėto įkėlimo poveikį jūsų svetainės našumui. Tai padės jums nustatyti problemas ir optimizuoti įgyvendinimą. „Google PageSpeed Insights“ ir „WebPageTest“ yra puikūs nemokami įrankiai svetainės našumui matuoti.

Internacionalizavimo aspektai

Įgyvendindami atidėtą įkėlimą pasaulinei auditorijai, atsižvelkite į šiuos internacionalizavimo veiksnius:

• Skirtingi tinklo greičiai: Vartotojai skirtinguose regionuose gali turėti labai skirtingą tinklo greitį. Optimizuokite savo atidėto įkėlimo strategiją, atsižvelgdami į lėtesnius ryšius.
• Duomenų kainos: Kai kuriuose regionuose duomenų kainos yra aukštos. Atidėtas įkėlimas gali padėti sumažinti duomenų suvartojimą ir pagerinti vartotojo patirtį vartotojams su ribotais duomenų planais.
• Įrenginių galimybės: Vartotojai skirtinguose regionuose gali naudoti skirtingus įrenginius su skirtingomis galimybėmis. Išbandykite savo atidėto įkėlimo įgyvendinimą įvairiuose įrenginiuose, kad įsitikintumėte, jog jis veikia teisingai.
• Turinio pristatymo tinklai (CDN): Naudokite CDN, kad pristatytumėte savo svetainės resursus iš serverių, esančių visame pasaulyje. Tai gali pagerinti našumą vartotojams skirtinguose regionuose. Pavyzdžiui, Europos lankytinų vietų paveikslėliai turėtų būti teikiami iš CDN galinio taško Europoje ES vartotojams, kai tik įmanoma.
• Paveikslėlių formatai: Apsvarstykite galimybę naudoti šiuolaikinius paveikslėlių formatus, tokius kaip WebP, kurie siūlo geresnį suspaudimą ir kokybę nei tradiciniai formatai, tokie kaip JPEG ir PNG. Tačiau atsižvelkite į naršyklių suderinamumą; naudokite tinkamus atsarginius variantus (fallbacks) senesnėms naršyklėms, kurios nepalaiko WebP.
• Prieinamumas: Užtikrinkite, kad jūsų atidėto įkėlimo įgyvendinimas būtų prieinamas vartotojams su negalia. Pateikite tinkamą alt tekstą paveikslėliams ir užtikrinkite, kad įkėlimo būsena būtų pranešama pagalbinėms technologijoms.

Išvada

Atidėtas įkėlimas yra galinga technika, skirta svetainės našumui optimizuoti ir vartotojo patirčiai gerinti. Atidėdami už ekrano ribų esančių išteklių įkėlimą, galite sutrumpinti pradinį puslapio įkėlimo laiką, sumažinti duomenų srauto suvartojimą ir sumažinti serverio apkrovą. Nesvarbu, ar kuriate mažą asmeninę svetainę, ar didelę verslo programą, atidėtas įkėlimas turėtų būti pagrindinė jūsų našumo optimizavimo strategijos dalis. Laikydamiesi šiame straipsnyje aprašytų geriausių praktikų ir atsižvelgdami į internacionalizavimo veiksnius, galite užtikrinti, kad jūsų atidėto įkėlimo įgyvendinimas būtų efektyvus ir suteiktų teigiamą vartotojo patirtį pasaulinei auditorijai.

Pasinaudokite atidėtu įkėlimu ir atraskite greitesnę, efektyvesnę ir patogesnę interneto patirtį visiems.